<template>
  <div class="open-productions page">
    <div class="has-text-centered" v-if="isOpenProductionsLoading">
      <spinner />
    </div>
    <div class="flexrow open-productions-header" v-if="!isOpenProductionsLoading && openProductions.length > 0">
      <h1 class="title flexrow-item">
        <img src="../../assets/kitsu.png" width="23"/>
        {{ $t('productions.home.title') }}
      </h1>
      <div class="filler"></div>
      <div
        class="button flexrow-item"
        v-if="isCurrentUserAdmin"
      >
        <a
          @click="showNewModal"
        >
          {{ $t('productions.home.create_new') }}
        </a>
      </div>
    </div>
    <div class="open-productions-box" v-if="!isOpenProductionsLoading && openProductions.length > 0">
      <img src="">
      <div
        :class="{
          'open-productions-list': true,
          'is-grid': openProductions && openProductions.length > 4
        }"
      >
        <div
          class="open-production has-text-centered"
          :key="production.id"
          v-for="production in openProductions">

          <router-link
            :to="getPath(production)"
          >
            <div
              class="avatar has-text-centered"
              v-bind:style="{
                background: getAvatarColor(production)
              }"
            >
              <span v-if="!production.has_avatar">
                {{ generateAvatar(production) }}
              </span>
              <img :src="getThumbnailPath(production)" v-else />
            </div>
            <div class="production-name">
              {{ production.name }}
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <div class="has-text-centered welcome" v-else>
      <p class="kitsu-logo info">
        <img src="../../assets/illustrations/studio_collaboration.png" />
      </p>
      <h1 class="title has-text-centered">
        {{ $t('productions.home.welcome') }}
      </h1>
      <div v-if="isCurrentUserAdmin">
        <p class="has-text-centered info">
          {{ $t('productions.home.empty') }}
        </p>
        <p class="has-text-centered">
          <button-simple
            class="level-item big-button"
            :text="$t('productions.home.create_new')"
            :is-responsive="false"
            @click="showNewModal"
          />
        </p>
      </div>
      <div v-else-if="isCurrentUserClient">
        <p class="has-text-centered">
          {{ $t('productions.home.no_prod_for_client') }}
        </p>
      </div>
      <div v-else-if="!isCurrentUserManager">
        <p class="has-text-centered">
          {{ $t('productions.home.no_task') }}
        </p>
      </div>
    </div>
    <edit-production-modal
      :active="modals.isNewDisplayed"
      :is-loading="loading.edit"
      :is-error="errors.edit"
      @confirm="confirmEditProduction"
      @cancel="hideNewModal"
    />

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

import colors from '../../lib/colors.js'
import ButtonSimple from '../widgets/ButtonSimple'
import EditProductionModal from '../modals/EditProductionModal'
import Spinner from '../widgets/Spinner'

export default {
  name: 'open-productions',

  components: {
    ButtonSimple,
    EditProductionModal,
    Spinner
  },

  data () {
    return {
      errors: {
        edit: false
      },
      loading: {
        edit: false
      },
      modals: {
        isNewDisplayed: false
      }
    }
  },

  computed: {
    ...mapGetters([
      'isCurrentUserAdmin',
      'isCurrentUserManager',
      'isCurrentUserClient',
      'isOpenProductionsLoading',
      'lastProductionScreen',
      'openProductions'
    ])
  },

  methods: {
    ...mapActions([
      'newProduction'
    ]),

    generateAvatar (production) {
      const firstLetter = production.name.length > 0 ? production.name[0] : 'P'
      return firstLetter.toUpperCase()
    },

    getAvatarColor (production) {
      return colors.fromString(production.name)
    },

    getPath (production) {
      return this.sectionPath(production, this.lastProductionScreen)
    },

    sectionPath (production, section) {
      const route = {
        name: section,
        params: {
          production_id: production.id
        }
      }
      if (production.production_type === 'tvshow') {
        route.name = `episode-${section}`
        if (section !== 'assets') {
          route.params.episode_id = production.first_episode_id
        } else {
          route.params.episode_id = 'all'
        }
      }
      return route
    },

    getThumbnailPath (production) {
      return `/api/pictures/thumbnails/projects/${production.id}.png`
    },

    confirmEditProduction (form) {
      this.errors.edit = false
      this.loading.edit = true
      this.newProduction(form)
        .then(() => {
          this.modals.isNewDisplayed = false
          this.loading.edit = false
        })
        .catch((err) => {
          console.error(err)
          this.loading.edit = false
          this.errors.edit = true
        })
    },

    showNewModal () {
      this.modals.isNewDisplayed = true
    },

    hideNewModal () {
      this.modals.isNewDisplayed = false
    }
  },

  watch: {},

  metaInfo () {
    return {
      title: `${this.$t('productions.home.title')} - Kitsu`
    }
  }
}
</script>

<style lang="scss" scoped>
.dark {
  .open-productions {
    background: $dark-grey-light;
  }

  .open-productions-box {
    background: $dark-grey-lighter;
    box-shadow: 0 0 4px 2px #333;
  }

  .open-productions-list {
    .open-production:hover .avatar{
      box-shadow: 0 0 4px 2px #444;
    }
  }
}

h1.title {
  margin-bottom: 0;
  text-transform: uppercase;
  color: $grey;
}

.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));

  .open-production {
    margin: 2em auto 0 auto;
  }
}

.open-productions .open-productions-list {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;

  .avatar {
    width: 100px;
    height: 100px;
    margin: auto;
    font-size: 64px;
    font-weight: bold;
    border-radius: 25px;
  }

  .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
  }

  .open-production {
    overflow-wrap: break-word;
    padding: 10px;
    cursor: pointer;
    padding: 1em;
    flex: 1;
  }

  .open-production:hover {
    transition: all .4s ease-in-out;
    transform: scale(1.1);
  }

  .open-production:hover .avatar {
    transition: all .4s ease-in-out;
    box-shadow: 0 0 4px 2px var(--box-shadow);
  }

  .open-production:hover .production-name {
    transition: all .4s ease-in-out;
    transform: scale(1.15);
    text-shadow: 0px 0px 3px var(--box-shadow);
  }
}

.production-name {
  font-size: 1.4em;
  text-transform: uppercase;
  color: $grey;
  margin: 0.5em auto;
  width: 200px;
}

.welcome {
  max-width: 1000px;
  margin: auto;

  h1 {
    margin-top: 1em;
  }
}

.kitsu-logo {
  margin-top: 4em;
}

a.secondary {
  color: #BBB;
}

a.secondary:hover {
  text-decoration: underline
}

.new-production-link {
  margin-top: 4em;

  a {
    color: #BBB;
  }
}

.open-productions {
  background: #FAFAFA;
}

.open-productions-box {
  background: white;
  box-shadow: 0 0 3px 3px #EEE;
  border-radius: 3em;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 3em 3em 4em 3em;
}

.open-productions-header {
  margin-top: 4em;
  margin-bottom: 1em;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.open-productions.page {
  height: auto;
  min-height: 100vh;
  padding-bottom: 3em;
}

@media screen and (max-width: 768px) {
  .title {
    margin-top: 1em;
  }

  .production-name {
    font-size: 1.1em;
  }

  .page {
    padding-top: 3em;
  }

  .open-productions-header {
    margin-bottom: 2em;
    h1 {
      font-size: 1.6em;
      font-weight: bold;
      margin-bottom: 1em;
      margin-top: 0;
      padding-top: 0;
    }
  }

  .open-productions-box {
    padding: 0;
  }

  .flexrow {
    flex-direction: column;
  }
}
</style>
